<template>
  <div>
    <el-form ref="columnForm" :model="model" size="small">
      <el-table :data="model.fieldList">
        <el-table-column label="字段名">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbField'"
                          :rules="[{required: true, message: '字段列名不能为空', trigger: 'blur'}]">
              <el-input v-model="scope.row.dbField" placeholder="请输入字段列名"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段注释">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.label'"
                          :rules="[{required: true, message: '字段标签不能为空', trigger: 'blur'}]">
              <el-input v-model="scope.row.label" placeholder="请输入字段标签" disabled/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段类型">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbType'"
                          :rules="[{required: true, message: '字段类型不能为空', trigger: 'blur'}]">
              <el-select v-model="scope.row.dbType" style="width: 100%"
                         @change="(value) => handleDbFieldTypeChange(value, scope.row)">
                <el-option v-for="dict in dbFieldTypeList" :key="dict.value"
                           :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="字段长度">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbLength'">
              <el-input-number v-model="scope.row.dbLength" :disabled="!getLengthFlag(scope.row.dbType)"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="小数长度">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.dbPrecision'">
              <el-input-number v-model="scope.row.dbPrecision" :disabled="!getPrecisionFlag(scope.row.dbType)"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template v-slot="scope">
            <el-form-item :prop="'fieldList.' + scope.$index + '.remarks'">
              <el-input v-model="scope.row.remarks" placeholder="请输入备注" readonly/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-form-item>
              <el-button type="danger" size="small" @click="deleteField(scope.$index)">删除</el-button>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div>
      <el-button @click="insertField">添加字段</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GenCodeDbFieldForm',
  props: {
    model: {
      type: Object,
      required: true
    }
  },
  computed: {
    dbFieldTypeList () {
      return this.$store.getters['auth/getDict']('gen_code_db_field_type')
    }
  },
  watch: {
    'model.fieldList' (newVal) {
      console.log(newVal)
    }
  },
  data () {
    return {}
  },
  methods: {
    getLengthFlag (value) {
      for (const each in this.dbFieldTypeList) {
        const dict = this.dbFieldTypeList[each]
        if (dict.value === value) return dict.lengthFlag
      }
      return false
    },
    getPrecisionFlag (value) {
      for (const each in this.dbFieldTypeList) {
        const dict = this.dbFieldTypeList[each]
        if (dict.value === value) return dict.precisionFlag
      }
      return false
    },
    handleDbFieldTypeChange (value, field) {
      for (const each in this.dbFieldTypeList) {
        const dict = this.dbFieldTypeList[each]
        if (dict.value === value) {
          // field.lengthFlag = dict.lengthFlag
          field.dbLength = dict.lengthFlag && field.dbLength ? field.dbLength : dict.lengthDefault
          // field.precisionFlag = dict.precisionFlag
          field.dbPrecision = dict.precisionFlag && field.dbPrecision ? field.dbPrecision : dict.precisionDefault
        }
      }
    },
    insertField () {
      const field = {
        field: '',
        type: '01',
        dbType: '01',
        lengthFlag: false,
        dbLength: null,
        precisionFlag: false,
        dbPrecision: null,
        label: '',
        dbNotNullFlag: '0',
        remarks: ''
      }
      this.handleDbFieldTypeChange(field.dbType, field)
      this.model.fieldList.push(field)
    },
    deleteField (index) {
      this.model.fieldList.splice(index, 1)
    },
    submitForm () {
      return this.$refs.columnForm.validate()
    }
  }
}
</script>

<style scoped>

</style>
